<template>
    <div class="collect-change">
        <ul class="bottom-ash-line">
            <li>
                <div>状态</div>
                <div class="status">{{status}}</div>
            </li>
            <li>
                <div>订单编号</div>
                <div>{{dataset.orderNum}}</div>
            </li>
            <li>
                <div>提交店铺</div>
                <div>{{dataset.username}}</div>
            </li>
            <li>
                <div>提交时间</div>
                <div>{{dataset.createTime}}</div>
            </li>
            <li v-for="(item,index) in detail" class="detail-order-type">
                <div class="detail-classification">
                    <div>所属分类</div>
                    <div class="type">{{item.title}}</div>
                </div>
                <div class="detail-weight-number">
                    <!-- <div>重量/数量</div>
                    <div class="weight-number" >
                        <div class="weightChange" v-if="item.weighting_method==0">
                            <div class="left-change" @click="changeS('weight')">
                                <img src="../../../static/images/success-green.png" alt="">
                                <span>重量</span>
                            </div>
                            <div class="right-input">
                                <van-field  v-model="item.weight"  placeholder="请输入重量" class="inputF" :border="false"  />
                                <span>kg</span>
                            </div>
                        </div>
                        <div class="numberChange"  v-else>
                            <div class="left-change" @click="changeS('number')">
                                <img src="../../../static/images/success-green.png" alt="">
                                <span>数量</span>
                            </div>
                            <div class="right-input">
                                <van-field v-model="item.number"  placeholder="请输入数量"  class="inputF" :border="false"  />
                                <span>个</span>
                            </div>
                        </div>
                    </div> -->
                    <div>&nbsp;</div>
                    <div class="weight-number" >
                        <div class="weightChange">
                            <div class="left-change">
                                <img src="../../../static/images/success-green.png" alt="">
                                <span>{{ item.unit }}</span>
                            </div>
                            <div class="right-input">
                                <van-field v-model="item.number" placeholder="请输入相关数值" class="inputF" :border="false"  />
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <ul>
           <li>
               <div>资金到账</div>
               <div class="capital-account">
                   <div @click="dataset.paytype=1?dataset.paytype==0:dataset.paytype==1">
                       <img v-if="dataset.paytype==0" src="../../../static/images/success-green.png" alt="">
                       <img v-else src="../../../static/images/circle-white.png" alt="">
                       <span>平台交易</span>
                   </div>
                   <div @click="dataset.paytype=0?dataset.paytype==1:dataset.paytype==0">
                       <img v-if="dataset.paytype==1" src="../../../static/images/success-green.png" alt="">
                       <img v-else src="../../../static/images/circle-white.png" alt="">
                       <span>现场交易</span>
                   </div>
               </div>
           </li>
            <li>
                <div>收取方式</div>
                <div class="capital-account">
                    <div @click="dataset.delivery_method=1?dataset.delivery_method==0:dataset.delivery_method==1">
                        <img v-if="dataset.delivery_method==0" src="../../../static/images/success-green.png" alt="">
                        <img v-else src="../../../static/images/circle-white.png" alt="">
                        <span>上门收取</span>
                    </div>
                    <div @click="dataset.delivery_method=0?dataset.delivery_method==1:dataset.delivery_method==0">
                        <img v-if="dataset.delivery_method==1" src="../../../static/images/success-green.png" alt="">
                        <img v-else src="../../../static/images/circle-white.png" alt="">
                        <span>门店自送</span>
                    </div>
                </div>
            </li>
        </ul>
        <buttom-submit-confirm-collect
            :price="dataset.price" :detail="detail"
            :isbaozhi="dataset.isbaozhi" :dataset="dataset" changeButtom="change" :ordernumber="dataset.orderNum" />
    </div>
</template>

<script>
    import { Field } from 'vant';

    import ButtomSubmitConfirmCollect from '../../components/currency/order-item/bottom-submit-confirm-collect.vue';
    export default {
        name: "collect-change",
        components:{
          ButtomSubmitConfirmCollect:ButtomSubmitConfirmCollect,
            [Field.name]:Field
        },
        data() {
            return {
                ordernumber:'',
                status:'',
                detail:[],
                dataset: {},
            }
        },
        created(){
        },
        mounted(){
            this.ordernumber = this.$route.query.ordernumber;
            this.getCollectDetails();
        },
        methods:{
            getCollectDetails() {
                var that = this;
                var url = '/api/home/order/getone';
                var param = {
                    ordernumber: this.ordernumber,
                    token: this.$store.state.options.user.token
                };
                this.$util.postRequestInterface(url, param, (res) => {
                    switch (res.data.status) {
                        case 1:
                            this.status = '待收取';
                            break;
                        case 3:
                        case 4:
                            that.status = '待确认';
                            break;
                        case 5:
                            that.status = '已完成';
                            break;
                        case 6:
                            that.status = '已取消';
                            break;
                    }
                    var x = res.data;
                    var resDetail = x.detail;
                    for (let i of resDetail) {
                        that.detail.push({
                            id:i.id,
                            garbageid:i.garbageid,
                            garbagepgalist: i.garbagepgalist,
                            title: i.garbagename,
                            weighting_num:i.weighting_num,
                            weighting_method:i.weighting_method,
                            // number: i.weighting_method == 1 ? parseInt(i.weighting_num) : '',
                            // weight: i.weighting_method == 0 ? i.weighting_num : '',
                            number: i.weighting_num,
                            unit: i.danweiming,
                            time: that.$moment(x.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                            price: parseFloat(x.price).toFixed(2),
                            isbaozhi: x.isbaozhi,
                            danweiming:i.danweiming
                        });
                    }
                    that.dataset = {
                        orderNum: x.ordernumber,
                        username: x.username,
                        createTime: that.$moment(x.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                        paytype: x.paytype,
                        delivery_method: x.delivery_method,
                        price: x.price,
                        isbaozhi: x.isbaozhi,
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    .collect-change{
        padding-bottom: 5rem;
        ul{
            padding: 1rem;
            .detail-order-type{
                display: block;
                .detail-classification,.detail-weight-number{
                    width: 100%;
                    padding: 1rem 0;
                    display: flex;
                    align-items: center;
                    & > div:first-child {
                        width: 30%;
                        color: #999999;
                        font-size: 1.4rem;
                    }
                    & > div:last-child {
                        width: 70%;
                        word-wrap:break-word;
                    }
                }
                .detail-classification{
                    border-bottom: 0.01rem solid #DDDDDD;
                }
            }
            li{
                display: flex;
                align-items: center;
                padding: 1rem;
                color: #333333;
                border-bottom: 0.01rem solid #DDDDDD;
                &>div:first-child{
                    width: 30%;
                    color: #999999;
                    font-size: 1.4rem;
                }
                &>div:last-child{
                    width: 70%;
                    word-wrap:break-word;
                }
                img{
                    width: 1.5rem;
                    height: 1.5rem;
                    margin-right: 1rem;
                    vertical-align: middle;
                }

                .status{
                    color: #00CC00;
                }
                .type {
                    width: 70%;
                    position: relative;
                }
                .type::after {
                    content: "";
                    display: block;
                    width: 1rem;
                    position: absolute;
                    top: 0rem;
                    bottom: 0rem;
                    right: 0rem;
                    background-image: url("../../../static/images/arrow-right-ash.png");
                    background-repeat: no-repeat;
                    background-position: center right;
                    background-size: 50% 50%;
                }
                .weight-number{
                    width: 70%;
                    display: flex;
                    flex-direction: column;
                    .weightChange,.numberChange{
                        width: 100%;
                        padding: 1.2rem 0;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-wrap: nowrap;
                        .left-change{
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }
                    }
                    .weightChange{
                        /*border-bottom: 0.01rem solid #DDDDDD;*/
                    }
                    .right-input{
                        display: flex;
                        width: 50%;
                        justify-content: flex-end;
                        align-items: center;
                        .inputF{
                            padding: 0;
                            margin: 0;
                            .van-field__control{
                                text-align: right;
                                margin-right: .4rem;
                            }
                        }
                    }
                }
                .capital-account{
                    width: 70%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

            }
            li:last-child{
                border-bottom: none;
            }
        }
    }
</style>
